<template>
  <t-breadcrumb class="breadcrumb">
    <t-breadcrumbItem>
      <t-icon name="home" />首页
    </t-breadcrumbItem>
    <t-breadcrumbItem>用户管理</t-breadcrumbItem>
  </t-breadcrumb>
  <div class="head">
    <img src="富强.png" alt="">
    <img src="民主.png" alt="">
    <img src="文明.png" alt="">
    <div class="form">
      <t-form label-width="90px" :data="data.formData" ref="userForm" @submit="queryUser">
        <t-row>
          <t-col :span="3">
            <t-form-item label="账户：">
              <t-input v-model="data.formData.account" placeholder="请输入账户" />
            </t-form-item>
          </t-col>
          <t-col :span="3">
            <t-form-item label="姓名：">
              <t-input v-model="data.formData.username" placeholder="请输入姓名" />
            </t-form-item>
          </t-col>
        </t-row>
        <t-row style="margin-top: 20px;">
          <t-col :span="3">
            <t-form-item label="性别：">
              <t-select v-model="data.formData.sex" class="demo-select-base">
                <t-option v-for="(item, index) in data.sexOptions" :key="index" :value="item.value" :label="item.label">
                  {{ item.label }}
                </t-option>
              </t-select>
            </t-form-item>
          </t-col>
          <t-col :span="3">
            <t-form-item label="类别：">
              <t-select v-model="data.formData.type" class="demo-select-base">
                <t-option v-for="(item, index) in data.typeOptions" :key="index" :value="item.value"
                  :label="item.label">
                  {{ item.label }}
                </t-option>
              </t-select>
            </t-form-item>
          </t-col>
          <t-col :span="3">
            <t-form-item label-width="20px">
              <t-button type="submit">查询</t-button>
            </t-form-item>
          </t-col>
        </t-row>
      </t-form>
    </div>
  </div>
  <div class="content">
    <t-table :maxHeight="530" row-key="id" :data="table.data" :columns="table.columns" bordered table-content-width="100%"
      :pagination="{ total: data.total }" @PageChange="pageChange" :loading="data.loading">
      <template #type="{ row }">
        <span v-if="row.type === 0">学生</span>
        <span v-else-if="row.type === 1">教师</span>
        <span v-else-if="row.type === 2">领导</span>
        <span v-else>管理员</span>
      </template>
      <template #operation="{ row }">
        <t-popconfirm theme="danger" content="是否删除该用户?" @Confirm="delUser(row.id)">
          <t-button theme="danger">删除</t-button>
        </t-popconfirm>
        <t-button style="margin-left: 5px;" @click="updateUser(row)">修改</t-button>
        <t-button v-if="row.type === 1" style="margin-left: 5px;" @click="addTeacher(row)">添加教师</t-button>
        <t-button v-if="row.type === 0" style="margin-left: 5px;" @click="addStudent(row)">设置班级</t-button>
      </template>
    </t-table>
  </div>
  <userUpdateDialog ref="userUpdate" @callback="queryUser" />
  <addTeacherDialog ref="teacherAdd" @callback="queryUser" />
  <SetClassDialog ref="setClass" @callback="queryUser" />
</template>
<script setup lang="ts">
import {MessagePlugin, PageInfo} from 'tdesign-vue-next';
import {onMounted, reactive, defineEmits, ref} from 'vue';
import {deleteUser, queryUserAll} from '../api/User';
import userUpdateDialog from '../components/userUpdateDialog.vue';
import addTeacherDialog from '../components/teacherDialog.vue';
import SetClassDialog from "../components/setClassDialog.vue";
const data = reactive({
  // 查询的表单
  formData: {
    account: '',
    username: '',
    sex: '',
    type: '',
    pageSize: 10,
    current: 1,
  },
  // 表格加载状态
  loading: true,
  // 数据总数
  total: 0,
  // 性别选择
  sexOptions: [
    { label: '全部', value: '' },
    { label: '男', value: '男' },
    { label: '女', value: '女' },
  ],
  // 类型选择
  typeOptions: [
    { label: '全部', value: '' },
    { label: '学生', value: 0 },
    { label: '教师', value: 1 },
    { label: '领导', value: 2 },
    { label: '管理员', value: 3 },
  ],
});
// 表格
const table = reactive({
  // 表格数据
  data: [],
  // 表格栏
  columns: [{
    align: 'center',
    width: 30,
    colKey: 'id',
    title: 'ID',
    fixed: 'left',
  },
  {
    align: 'center',
    colKey: 'account',
    title: '账户名',
    fixed: 'left',
  },
  {
    align: 'center',
    colKey: 'username',
    title: '姓名',
    fixed: 'left',
  },
  {
    align: 'center',
    colKey: 'sex',
    title: '性别',
    fixed: 'left',
  },
    {
      align: 'center',
      colKey: 'age',
      title: '年龄',
      fixed: 'left',
    },
  {
    align: 'center',
    colKey: 'type',
    title: '类别',
    fixed: 'left',
  },
  {
    align: 'center',
    colKey: 'operation',
    title: '操作',
    fixed: 'left',
  },
  ]
});
// 分页
function pageChange(pageInfo: PageInfo) {
  data.formData.pageSize = pageInfo.pageSize;
  data.formData.current = pageInfo.current;
  queryUser();
}
// 查询用户列表请求
async function queryUser(){
  data.loading = true;
  const result = await queryUserAll(data.formData);
  if(result) {
    data.total = result.data.total;
    table.data = result.data.userList;
    data.loading = false;
  }
}
// 删除用户
async function delUser(id:number){
  const result = await deleteUser(id);
  MessagePlugin.success(result.message);
  queryUser();
}
onMounted(()=>{
  queryUser()
})
// 修改用户弹框信息
const userUpdate = ref();
// 修改点击事件
interface rowType{
  id: number;
  account: string;
  username: string;
  age: number;
  sex: string;
  type: number;
}
// 修改用户
function updateUser(row:rowType) {
  userUpdate.value.open(row);
}
// 添加教师弹框信息
const teacherAdd = ref();
// 添加教师
async function addTeacher(row: rowType){
  teacherAdd.value.open({ user_id: row.id, username: row.username }, 'add');
}
// 设置班级
const setClass = ref();
async function addStudent(row: rowType) {
  setClass.value.open(row.id);
}

</script>
<style lang="less" scoped>
.breadcrumb {
  margin: 10px 0 0 10px;
}

.head {
  width: 100%;
  height: 150px;
  display: flex;

  img {
    width: 100px;
    height: 100px;
    margin: 10px;
  }

  .form {
    flex: 1;
    margin: 10px;
  }
}

.content {
  width: 100%;
  padding: 0 10px;
}

//:deep(.t-table__cell--fixed-left) {
//  color: white;
//  background-color: #0048cd;
//}
</style>
